<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Map
      <span *ngIf="(gameService.player$ | async) as player">[{{ player.x }},{{ player.y }}]</span>
      <span *ngIf="ddStepsLeft">[DD: {{ ddStepsLeft }}]</span>
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="showPersonalities($event)">
        <ion-icon slot="icon-only" name="more"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content #content>
  <div class="help" *ngIf="gameText | async as text" [class.ion-hide]="text.length === 0">
    <div *ngFor="let line of text" class="help-line">{{ line }}</div>
  </div>
</ion-content>
